<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增角色"
    width="600"
    :close-on-click-modal="false"
    @close="close"
  >
    <template #default>
      <el-form :model="roleForm">
        <el-form-item label="角色名称">
          <el-input
            v-model="roleForm.roleName"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input
            v-model="roleForm.rolePerm"
            placeholder="请输入权限字符"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="roleForm.enabled">
            <el-radio
              v-for="item in dicts.system_global_status"
              :key="item.id"
              :label="roleForm.enabled == item.v ? roleForm.enabled : item.v"
              size="large"
            >
              {{ item.k }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单权限">
          <div class="menu-item">
            <el-checkbox
              v-model="permission.openAll"
              @change="toggleTreeCollapse"
            >
              展开/折叠
            </el-checkbox>
            <el-checkbox
              v-model="permission.selectAll"
              @change="toggleTreeChecked"
            >
              全选/全不选
            </el-checkbox>
            <el-checkbox v-model="permission.linkage">
              父子(联动/不联动)
            </el-checkbox>
            <el-tree
              style="max-width: 600px"
              ref="menuTreeRef"
              :data="permission.treeList"
              :props="permission.treeProps"
              :check-strictly="!permission.linkage"
              :default-expand-all="permission.openAll"
              show-checkbox
              node-key="id"
              class="tree"
            ></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="roleForm.descript"
            placeholder="请输入备注内容"
            :maxlength="300"
            show-word-limit
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
} from 'vue'
import { menuTree, IRoleMenuItem, roleAdd } from '@api/role'
import { ElTree } from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
})
const dialogVisible = ref(props.dialogVisible)

onBeforeMount(async () => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_global_status'])
  }
  // 获取全下你菜单
  let res = await menuTree()
  permission.treeList = res.data
})

// 表单数据
const roleForm = reactive({
  roleName: '',
  rolePerm: '',
  enabled: '1',
  descript: '',
})
interface IPermissin {
  treeList: IRoleMenuItem[]
  treeProps: {
    label: string
  }
  linkage: boolean
  openAll: boolean
  selectAll: boolean
}

const menuTreeRef = ref<InstanceType<typeof ElTree>>()
// 菜单树
let permission: IPermissin = reactive({
  treeList: [],
  treeProps: {
    label: 'name',
  },
  linkage: true,
  openAll: false,
  selectAll: false,
})
// 展开/折叠
const toggleTreeCollapse = (e: boolean) => {
  let nodeMap = menuTreeRef.value!.store.nodesMap //!.   断言
  Object.keys(nodeMap).forEach((key) => {
    nodeMap[key].expanded = e
  })
}

// 全选/全不选
const toggleTreeChecked = (e: boolean) => {
  let nodeMap = menuTreeRef.value!.store.nodesMap //!.   断言
  Object.keys(nodeMap).forEach((key) => {
    nodeMap[key].checked = e
  })
}

const emit = defineEmits()
// 关闭
const close =  () => {
  emit('update:dialogVisible', false)
}

// 提交
const onSubmit =async () => {
  let res = await roleAdd({
    permissionIds: menuTreeRef.value!.getCheckedKeys() as string[],
    ...roleForm,
  })
  if (res.code != '200') return
  close()
  emit('roleChange')
}
</script>
<style scoped>
.tree {
  margin-top: 0.5rem;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 4rpx;
}
</style>
